import React from 'react';
import {
  Modal,
  Form,
  Input,
  Select,
  Row,
  Col,
} from 'antd';

const { TextArea } = Input;
const { Option } = Select;

const SongFormModal = ({
  visible,
  onCancel,
  onOk,
  editingSong,
  form,
}) => {
  const categories = ['流行', '摇滚', '民谣', '爵士', '古典', '电子'];

  const handleModalOk = () => {
    form.validateFields().then(values => {
      const songData = {
        ...values,
        key: editingSong ? editingSong.key : Date.now().toString(),
        practiceCount: editingSong ? editingSong.practiceCount : 0,
        mastery: editingSong ? editingSong.mastery : 0,
        lastPractice: editingSong ? editingSong.lastPractice : '',
        status: editingSong ? editingSong.status : 'active',
      };

      onOk(songData);
    });
  };

  return (
    <Modal
      title={editingSong ? '编辑歌曲' : '添加歌曲'}
      visible={visible}
      onOk={handleModalOk}
      onCancel={onCancel}
      width={600}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={editingSong || {}}
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="歌曲名称"
              name="name"
              rules={[{ required: true, message: '请输入歌曲名称' }]}
            >
              <Input placeholder="请输入歌曲名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="艺术家"
              name="artist"
              rules={[{ required: true, message: '请输入艺术家' }]}
            >
              <Input placeholder="请输入艺术家" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="分类"
              name="category"
              rules={[{ required: true, message: '请选择分类' }]}
            >
              <Select placeholder="请选择分类">
                {categories.map(category => (
                  <Option key={category} value={category}>{category}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="难度等级"
              name="difficulty"
              rules={[{ required: true, message: '请选择难度等级' }]}
            >
              <Select placeholder="请选择难度等级">
                <Option value={1}>1星 - 简单</Option>
                <Option value={2}>2星 - 较简单</Option>
                <Option value={3}>3星 - 中等</Option>
                <Option value={4}>4星 - 较困难</Option>
                <Option value={5}>5星 - 困难</Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item
          label="练习备注"
          name="notes"
        >
          <TextArea rows={4} placeholder="请输入练习备注" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default SongFormModal; 